<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/layui/layui.js"></script>
		<script src="../js/common.js"></script>
	</head>

	<body>
		<button type="button" onclick="data.a = data.a+10;">改变1</button>
		<button type="button" onclick="data.b.push(50);">改变2</button>
		<button type="button" onclick="data.c.c1 = 50;">改变3</button>
		<script type="text/javascript">
			var data = {
				a: 200,
				b: [1, 2, 3],
				c: {
					c1: 1,
					c2: 2
				}
			};

			$.watchData(data, function(x, y, z) {
				var c = 'data发生了改变↓' + '</br>' +
					'新值:' + JSON.stringify(x) + '</br>' +
					'旧值:' + JSON.stringify(y) + '</br>' +
					'key:' + JSON.stringify(z);
				layer.alert(c);
			});
		</script>
	</body>

</html>